<template>
  <div>
    <div class="box-1" id="first">
      <h1>学生信息</h1>
      <div class="box-1-1">
        <h5>学生数据</h5>
        <div class="p1">
          <select name="" id="searchtype" class="xxk" v-model="soso.type">
            <option value="name">姓名</option>
            <option value="age">年龄</option>
            <option value="gender">性别</option>
          </select>
          <input type="text" class="int" id="searchv1" v-model.lazy="soso.value" />
          <button @click="getstudents(soso)">搜索</button>
          <table border="1">
            <thead>
              <tr>
                <th>学生编号</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
                <th>学生性别</th>
                <th>学生班级</th>
                <th>学生头像</th>
                <th>班主任</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody class="studentbody">
              <tr v-for="item in students" :key="item._id">
                <td>{{ item._id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.gender }}</td>
                <td>{{ item.classesId ? item.classesId.name : "未安置" }}</td>

                <td>
                  <img width="50" src="" alt="" />
                </td>
                <td></td>
                <td>
                  <router-link :to="'/Home/xgstudent/' + item._id">修改</router-link>

                  <a href="#" class="deleteBtn" @click.prevent="delstudent(item._id)">删除</a>
                </td>
              </tr>
            </tbody>
          </table>

          <p class="p2">
            <span>每页</span>
            <select name="" id="select2" class="xxk" v-model.lazy="pageSize">
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="10">10</option>
            </select>
            <span class="span">
              <!-- 显示第1条到第5条数据，共计30条数据 -->
              <span style="float: right; margin-right: 20px">第{{ currentPage }}/{{ pages }}页</span>
            </span>
          </p>
        </div>
        <div id="btn">
          <button @click="addonePage(1)">首页</button>
          <button @click="addonePage(currentPage-1)">上一页</button>
          <button @click="addonePage(currentPage+1)">下一页</button>
          <button @click="addonePage(pages)">尾页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // import axios from "../http/axios";
  // import api from "../http/api";
  import {
    createNamespacedHelpers
  } from "vuex";
  const {
    mapActions,
    mapState,
    mapMutations
  } = createNamespacedHelpers("students");
  export default {
    computed: {
      ...mapState([
        "pages",
        "total",
        "students",
        "currentPage",

        "soso",
      ]),
      pageSize: {
        get() {
          return this.$store.state.students.pageSize;
        },
        set(val) {
          this.setPageSize(val)
        }
      }
    },
    async mounted() {
      console.log(this.students);
      this.getstudents();
    },
    watch: {
      currentPage() {
        this.getstudents();
      },
      pageSize() {
        this.getstudents();
      },
    },
    methods: {
      ...mapMutations(["addonePage", "setPageSize"]),
      ...mapActions(["getstudents", "delstudent"]),

    },
  };
</script>

<style>
</style>